<template>
	<view class="pro-item">
		<view class="pic">
			<image :src="proitem.thumb" mode="aspectFill" class="img"></image>
		</view>
		<view class="txt">
			<view class="tt">
				{{proitem.name}}
			</view>
			<view class="price">
				<view class="big">￥{{proitem.price}}</view>
				<view class="small">￥{{proitem.before_price}}</view>
			</view>
			<view class="discount">3折</view>
			<view class="numbox">
				<view class="select-guige" v-if="false">
					选规格
				</view>
				<view class="uNum" v-else>
					<pro-num-box :item="proitem"></pro-num-box>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"product-item",
		data() {
			return {
				
			};
		},
		props:['proitem']
	}
</script>

<style lang="scss">
	.pro-item{ background: #fff; @include flex-box(); padding: 25rpx 0;
		.img{ width: 220rpx; height:180rpx; border-radius: 16rpx; overflow: hidden;}
		.txt{ flex-grow: 1; padding-left: 20px; position: relative;
			.tt{ font-size: 34rpx; font-weight:bold;@include ellipsis();}
			.price{@include flex-box-set(start,center); padding: 20rpx 0; font-weight:bold;
				.big{ font-size: 34rpx; color:$brand-theme-color}
				.small{ font-size: 26rpx; color:$text-font-color3; text-decoration: line-through; padding-left: 10rpx; }
			}
			.discount{ font-size: 22rpx; border:1px solid $brand-theme-color; color:$brand-theme-color; display:inline-block; padding: 3rpx 8rpx; border-radius: 6rpx; }
			.numbox{ position: absolute; right:0; bottom: 0;
				.select-guige{ padding: 0 10rpx; line-height: 40rpx; border-radius: 4rpx; background: $brand-theme-color; color:#fff; font-size: 28rpx;}
				.uNum{
					
				}
			}
		}
	}
	
</style>
